<script setup>
import { onMounted, ref, nextTick } from "vue";

var myChart, option;

const c2 = ref();

onMounted(async () => {
    await nextTick();
    myChart = echarts.init(c2.value);

    // 添加图表resize事件监听，以便在图表大小改变时调整容器高度
    myChart.on("resize", () => {
        const chartDom = qq.value;
        if (chartDom) {
            chartDom.style.height = "auto";
            const clientHeight = chartDom.clientHeight;
            const chartHeight = myChart.getHeight();
            if (clientHeight < chartHeight) {
                chartDom.style.height = chartHeight + "px";
            }
        }
    });

    option = {
        tooltip: {
            trigger: "item",
        },
        legend: {
            orient: "vertical",
            left: "left",
        },
        series: [
            {
                // name: "Access From",
                type: "pie",
                radius: "50%",
                data: [
                    {
                        value: 360,
                        name: "猫咪",
                        itemStyle: {
                            color: "#feca57",
                        },
                    },
                    {
                        value: 200,
                        name: "狗狗",
                        itemStyle: {
                            color: "#00d2d3",
                        },
                    },
                    { value: 160, name: "猫狗" },
                    {
                        value: 100,
                        name: "未知",
                        itemStyle: {
                            color: "#c8d6e5",
                        },
                    },
                ],
            },
        ],
        emphasis: {
            itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
            },
        },
    };
    myChart.setOption(option);
});
</script>

<template>
    <div ref="c2" style="width: 100%; height: 100%"></div>
</template>
